
<script setup>

    import { reactive, ref, computed } from 'vue';
    import { useAdminerStore } from '../stores/adminer';
    import { UserOutlined, LockOutlined  } from '@ant-design/icons-vue';
    import { loginAdminer, getAdminerSelf } from "/request.js";

    const adminerStore = useAdminerStore();

    const formState = reactive({
        username: '',
        password: ''
    });

    const onFinish = values => {
        console.log('Success:', values);
        loginAdminer(formState.username, formState.password)
        .then(async function(token) {
            if (token)
            {
                await getAdminerSelf()
                .then(function(adminer) {
                    if (adminer)
                    {
                        console.log(adminer);
                        adminerStore.setID(adminer.id);
                        adminerStore.setNickname(adminer.nickname);
                        adminerStore.setUsername(adminer.username);
                    }
                });
            }
        });
    };
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
        alert(errorInfo);
    };
    const disabled = computed(() => {
        return !(formState.username && formState.password);
    });

</script>

<template>
    <img class="background" alt="背景图片" src="/background.jpg"/>
    <view class="container-form">

        <a-form
            :model="formState"
            name="normal_login"
            class="login-form"
            @finish="onFinish"
            @finishFailed="onFinishFailed"
        >
            <a-form-item
            label="Username"
            name="username"
            :rules="[{ required: true, message: 'Please input your username!' }]"
            >
                <a-input v-model:value="formState.username">
                    <template #prefix>
                        <UserOutlined class="site-form-item-icon" />
                    </template>
                </a-input>
            </a-form-item>

            <a-form-item
            label="Password"
            name="password"
            :rules="[{ required: true, message: 'Please input your password!' }]"
            >
                <a-input-password v-model:value="formState.password">
                    <template #prefix>
                        <LockOutlined class="site-form-item-icon" />
                    </template>
                </a-input-password>
            </a-form-item>

            <a-form-item>
                <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">
                    Log in
                </a-button>
            </a-form-item>

        </a-form>

    </view>
</template>


<style>
    .background {
        position: fixed;
        left: 0%;
        top: 0%;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .container-form {
        z-index: 1;
        background-color: white;
        border: solid;
        border-radius: 5px;
        padding-top: 30px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        position: absolute;
        left: 60%;
        top: 30%;
    }

    .login-form {
        max-width: 300px;
    }
    .login-form-button {
        width: 100%;
    }
</style>

